<div
  #tabButtom
  role="tab"
  [p-tooltip]="widthButton > 239 || showTooltip ? label : ''"
  p-tooltip-position="top"
  class="po-tab-button-default"
  [id]="id"
  [ngClass]="{ 'po-tab-focusable': !disabled && !hide }"
  [attr.tabindex]="disabled ? null : 0"
  [attr.aria-selected]="active"
  [class.po-tab-button-active]="active"
  [class.po-tab-button-disabled]="disabled"
  (click)="onClick()"
  (focusin)="onFocusIn()"
  (focusout)="onFocusOut()"
  (keyup.enter)="onClick()"
>
  <div class="po-tab-button-content">
    <span [ngClass]="!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'" class="po-text-ellipsis">
      {{ label }}
    </span>
    <div
      class="po-tab-button-content-close-icon"
      *ngIf="!hideClose"
      (click)="closeTab($event)"
      (keydown)="closeTab($event)"
    >
      <po-icon
        [tabIndex]="activeCloseIcon ? 0 : -1"
        [attr.aria-label]="literals.close"
        p-icon="ICON_CLOSE"
        class="po-tab-button-icon-close"
      ></po-icon>
    </div>
  </div>
</div>
<div [ngClass]="{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }"></div>
